import Vue from 'vue'

const InputToTextOn = true // 开启的时候就是true

// 清除旧的插入元素，添加新的，同时隐藏原元素
const removeOldAndHiddenNew = (el, oldclass) => {
  const old = el.querySelectorAll(oldclass)
  // 如果旧的存在，则移除
  if (old && old.length > 0) {
    Array.from(old).forEach(child => {
      el.removeChild(child)
    })
  }
  // 隐藏原元素，为输入框
  if (el.hasChildNodes()) {
    Array.from(el.children).forEach(child => {
      child.style.display = 'none'
      child.classList.add('display-none')
    })
  }
}
// 根据值生成文本元素
const createTextForValue = (className, value) => {
  const newel = document.createElement('div')
  newel.classList.add(className, 'transform-detail-common')
  newel.innerHTML = value
  newel.style.fontSize = '12px'

  return newel
}
// 转换普通文本输入框，转换单选下拉输入框
const transformInput = (el) => {
  removeOldAndHiddenNew(el, '.transform-text')

  let inputs = el.querySelectorAll('input')
  if (!inputs || (inputs.length === 0)) {
    inputs = el.querySelectorAll('textarea')
  }

  if (inputs && inputs[0]) {
    const input = inputs[0]

    const newel = createTextForValue('transform-text', input.value)
    el.appendChild(newel)
  }
}
// 转换radio输入框
const transformRadio = (el) => {
  removeOldAndHiddenNew(el, '.transform-text')

  const valueclass = '.label.is-checked'
  const valueel = el.querySelectorAll(valueclass)

  if (valueel && valueel[0]) {
    const inputs = valueel[0].querySelectorAll('.el-radio__label')
    const input = inputs[0]

    const newel = createTextForValue('transform-text', input.innerText || '')
    el.appendChild(newel)
  }
}
// 转换树选择框
const transformTreeSelect = (el) => {
  removeOldAndHiddenNew(el, '.transform-text')

  const valueclass = '.vue-treeselect__single-value'
  const valueel = el.querySelectorAll(valueclass)

  if (valueel && valueel[0]) {
    const input = valueel[0]
    const newel = createTextForValue('transform-mult-text', input.innerText)
    el.appendChild(newel)
  }
}
// 转换多选树选择框
const transformMultTreeSelect = (el, notag) => {
  removeOldAndHiddenNew(el, '.transform-mult-text')

  const valueclass = '.vue-treeselect__multi-value-label'
  const valueel = el.querySelectorAll(valueclass)

  if (valueel) {
    const tagList = Array.from(valueel)
    const valueElms = tagList.map(child => {
      const tagclass = notag ? 'uifix-detail-mult-text-notag' : 'uifix-detail-mult-text'
      if (child) {
        return `<div class="${tagclass}">${child.innerText}</div>`
      }
    }).join('')

    const newel = createTextForValue('transform-mult-text', valueElms)
    el.appendChild(newel)
  }
}
// 转换多选下拉选择框
const transformMultSelect = (el, notag) => {
  removeOldAndHiddenNew(el, '.transform-mult-text')

  const tags = el.querySelectorAll('span.el-tag')

  if (tags && tags.length > 0) {
    const tagList = Array.from(tags)
    const valueElms = tagList.map(child => {
      const tagtext = child.querySelectorAll('.el-select__tags-text')[0]
      const tagclass = notag ? 'uifix-detail-mult-text-notag' : 'uifix-detail-mult-text'
      if (tagtext) {
        return `<div class="${tagclass}">${tagtext.innerText}</div>`
      }
    }).join('')

    const newel = createTextForValue('transform-mult-text', valueElms)

    el.appendChild(newel)
  }
}
// 转换地址选择框
const transformAddress = (el) => {
  removeOldAndHiddenNew(el, '.transform-address-text')

  const selects = el.querySelectorAll('.el-select')

  if (selects && selects.length > 0) {
    const selectList = Array.from(selects)
    const valueElms = selectList.map(child => {
      const addressinput = child.querySelectorAll('input')[0]
      if (addressinput) {
        return `<div class="uifix-detail-address-text">${addressinput.value}</div>`
      }
    }).join('')

    const newel = createTextForValue('transform-address-text', valueElms)

    el.appendChild(newel)
  }
}

const directiveDeal = (el, bindings, vnode) => {
  if (!InputToTextOn) { return }

  const istransform = bindings.value // 获取设置的不可编辑默认值
  // 如果绑定值为false 则不作处理
  if (!istransform) {
    return
  } else {
    // 如果绑定值为true 则进行转换
    const transformType = bindings.arg || 'input'

    el.classList.add('uifix-text-width-input')

    vnode.componentInstance.$nextTick(() => {
      switch (transformType) {
        // 普通文本输入框，单选下拉框
        case 'input':
          el.style.visibility = 'visible'
          el.style.maxHeight = '65px'
          transformInput(el)
          break
        // radio 输入框
        case 'radio':
          el.style.visibility = 'visible'

          transformRadio(el)
          break
        // 树选择框
        case 'treeselect':
          el.style.visibility = 'visible'
          transformTreeSelect(el)
          break
        // 多选树选择
        case 'multtreeselect':
          el.style.visibility = 'visible'
          transformMultTreeSelect(el, bindings.modifiers.notag)
          break
        // 多选选择
        case 'multselect':

          el.style.visibility = 'visible'
          transformMultSelect(el, vnode)

          break
        // 地址输入框
        case 'address':
          el.style.visibility = 'visible'
          transformAddress(el, vnode)
          break
        default:
          break
      }
    })
  }
}

// 详情输入框转文本指令
Vue.directive('viewinput', {
  bind(el, bindings, vnode) {
    directiveDeal(el, bindings, vnode)
  },
  update(el, bindings, vnode) {
    directiveDeal(el, bindings, vnode)
  }

})
// 辅助修改输入框宽度的指令
Vue.directive('textwidth', {
  bind(el, bindings) {
    if (!InputToTextOn) { return }

    const istransform = bindings.value // 获取设置的不可编辑默认值
    if (!istransform) {
      return
    }
    el.classList.add('uifix-text-width')
  },
  componentUpdated(el, bindings, vnode) {
    if (!InputToTextOn) { return }

    const istransform = bindings.value // 获取设置的不可编辑默认值
    if (!istransform) {
      return
    }
    el.classList.add('uifix-text-width')
  }
})
